<template>
  <transition name="enter-left">
  <div class="sidebar">
    <span class="close" @click="close"></span>
    <div class="sidebar-m">
      <h3 class="tt">欢乐阅读</h3>
      <p class="desc">全免费阅读小说体验</p>
      <div class="list">
        <div class="item">
          <span>夜间模式</span>
          <mt-switch></mt-switch>
        </div>
        <div class="item">
          <span>wifi下自动缓存</span>
          <mt-switch></mt-switch>
        </div>
        <router-link :to="{path:'/pushSetting'}" class="item">
          <span>推送设置</span>
          <span class="arrow"></span>
        </router-link>
        <router-link :to="{path:'/feedback'}" class="item">
          <span>帮助与反馈</span>
          <span class="arrow"></span>
        </router-link>
        <div class="item">
          <span>当前版本</span>
          <span class="txt">v1.0.1</span>
        </div>
        <div class="item">
          <span>清理缓存</span>
          <span class="txt">25M</span>
        </div>
        <router-link :to="{path:'/protocol'}" class="item">
          <span>使用协议</span>
          <span class="arrow"></span>
        </router-link>
        <router-link :to="{path:'/'}" class="item">
          <span>经常推荐</span>
          <span class="arrow"></span>
        </router-link>
      </div>
    </div>
  </div>
  </transition>
</template>
<script>
import { Switch } from 'mint-ui';
export default {
  name: 'sidebar',
  components: {

  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    close(){
      this.$emit("onsidebar");
    }
  }
}

</script>
<style lang="scss" scoped>
.close{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  .sidebar-m {
    width: 80%;
    height: 100%;
    background-color: #fff;
    padding:0 40px;
    position: relative;
    z-index: 2;
    .tt{
      font-size:65px;
      font-weight: normal;
      padding-top:60px;
    }
    .desc{
      font-size:26px;
      color:#b9b9b9;
      margin-bottom:70px;
    }
    .list{
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right:10px;
        margin-bottom:50px;
        span{
          font-size:30px;
          color:#333;
        }
        .txt{
          color:#c7c7c7;
        }
        .arrow{
          width:30px;
          height:30px;
          display: block;
          background:url(../assets/images/icon/r-icon5.png) no-repeat 0 0/100% auto;
        }
      }
    }
  }
}

</style>
